<template>
  <view class="share-popup" :class="{ 'show-popup': popupShow }">
    <view class="bg" :class="{ 'show-bg': popupShow }" @click="cancel"></view>
    <!-- 分享弹窗选项 -->
    <view class="popup-box" :class="{ 'show-box': popupShow }">
      <view class="popup-title">分享获得更多转化</view>
      <!-- 分享的目标 -->
      <view class="share-target flex flex-ai-c flex-jc-sa">
        <template v-for="(item, i) in shareList">
          <view
            :key="i"
            class="flex flex-dir-c flex-ai-c"
            @click.stop="handleShare(item)"
          >
            <i-icon
              :icon="item.icon"
              size="90rpx"
              :color="item.color"
              :type="!item.color ? 'multiple' : 'single'"
            ></i-icon>
            <text class="text">{{ item.text }}</text>
          </view>
        </template>
      </view>

      <!-- 取消按钮 -->
      <view class="btn-cancel" @click="cancel">
        <text>取消</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  model: {
    prop: 'popupShow',
    event: 'up',
  },
  props: {
    popupShow: {
      type: Boolean,
      default: false,
    },
    showDownload: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    show: {
      get() {
        return this.popupShow
      },
      set(v) {
        this.$emit('up', v)
      },
    },

    shareList() {
      if (this.showDownload) {
        return this.list
      } else {
        return this.list.splice(0, 2)
      }
    },
  },
  data() {
    return {
      // 分享目标app列表
      list: [
        {
          icon: 'iconfenxiangweixin',
          text: '微信',
          color: '#46bb36',
          type: 'WXSceneSession',
        },
        {
          icon: 'iconfenxiangpengyouquan',
          text: '朋友圈',
          color: '',
          type: 'WXSenceTimeline',
        },
        {
          icon: 'iconxiazai',
          text: '下载',
          color: '#fbb000',
          type: 'download',
        },
      ],
    }
  },

  methods: {
    // 点击分享
    handleShare(item) {
      this.$emit('change', item.type)
    },

    // 取消
    cancel() {
      this.$emit('close', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.share-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}
.show-popup {
  visibility: visible;
}
.bg {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: all 0.4s;

  &.show-bg {
    opacity: 0.5;
  }
}
// 分享弹窗样式
.popup-box {
  position: fixed;
  bottom: -300rpx;
  // bottom: 40rpx;
  left: 24rpx;
  right: 24rpx;
  font-size: 32rpx;
  color: #333333;
  opacity: 0;
  transition: all 0.4s;

  &.show-box {
    bottom: 40rpx;
    opacity: 1;
  }

  .popup-title {
    padding-top: 30rpx;
    font-size: 28rpx;
    text-align: center;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
  }

  .share-target {
    padding: 48rpx 0 30rpx;
    background: #fff;
    border-radius: 0 0 20rpx 20rpx;
    .text {
      margin-top: 26rpx;
      font-size: 32rpx;
    }
  }

  // 取消按钮
  .btn-cancel {
    height: 88rpx;
    line-height: 88rpx;
    margin-top: 20rpx;
    text-align: center;
    background: #fff;
    border-radius: 20rpx;
  }
}
</style>
